<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
    <meta name="HandheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="YES" />
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link href="favicon.png" rel="apple-touch-icon-precomposed" />
    <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

    <meta name="google-site-verification" content="XHNX_nkb_oo_RNBCPHJPYaON8gh65P5t7cRMVrUjiXw" />

    <title>Material Design Iconic Font by zavoloklom</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="stylesheets/styles.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<a class="hidden-xs" target="_blank" href="https://github.com/zavoloklom/material-design-iconic-font"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 3000" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>

<div id="navbar" class="navbar navbar-light-blue navbar-static-top hidden-print">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <i class="md md-menu md-lg"></i>
            </button>
            <a class="navbar-brand" href="index.html">Material Design Iconic Font</a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="hidden-sm active"><a href="index.html">Get Started</a></li>
                <li class="dropdown-split-left"><a href="icons.html">Icons</a></li>
                <li class="dropdown dropdown-split-right hidden-xs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="md md-arrow-drop-down"></i>
                    </a>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="icons.html"><i class="md md-flag"></i> Icons</a></li>
                        <li class="divider"></li>
                        <li><a href="icons.html#action"><i class="md md-home"></i> Action</a></li>
                        <li><a href="icons.html#alert"><i class="md md-warning"></i> Alert</a></li>
                        <li><a href="icons.html#audio-video"><i class="md md-play-circle-fill"></i> Audio / Video</a></li>
                        <li><a href="icons.html#communication"><i class="md md-forum"></i> Communication</a></li>
                        <li><a href="icons.html#content"><i class="md md-content-paste"></i> Content</a></li>
                        <li><a href="icons.html#device"><i class="md md-battery-80"></i> Device</a></li>
                        <li><a href="icons.html#editor"><i class="md md-format-textdirection-l-to-r"></i> Editor</a></li>
                        <li><a href="icons.html#file"><i class="md md-folder-open"></i> File</a></li>
                        <li><a href="icons.html#hardware"><i class="md md-desktop-windows"></i> Hardware</a></li>
                        <li><a href="icons.html#image"><i class="md md-collections"></i> Image</a></li>
                        <li><a href="icons.html#maps"><i class="md md-directions-bike"></i> Maps</a></li>
                        <li><a href="icons.html#navigation"><i class="md md-apps"></i> Navigation</a></li>
                        <li><a href="icons.html#notification"><i class="md md-phone-in-talk"></i> Notification</a></li>
                        <li><a href="icons.html#social"><i class="md md-people"></i> Social</a></li>
                        <li><a href="icons.html#toggle"><i class="md md-star-half"></i> Toggle</a></li>
                    </ul>
                </li>
                <li class="dropdown-split-left"><a href="examples.html">Examples</a></li>
                <li class="dropdown dropdown-split-right hidden-xs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="md md-arrow-drop-down"></i>
                    </a>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="examples.html">Examples</a></li>
                        <li class="divider"></li>
                        <li><a href="examples.html#basic">Basic Icons</a></li>
                        <li><a href="examples.html#larger">Larger Icons</a></li>
                        <li><a href="examples.html#bordered-pulled">Bordered &amp; Pulled Icons</a></li>
                        <li><a href="examples.html#spinning">Spinning Icons</a></li>
                        <li><a href="examples.html#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
                    </ul>
                </li>
                <li><a href="license.html">License</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="jumbotron jumbotron-ad hidden-print">
    <div class="container">
        <div class="col-xs-12">
            <h1>Material Design Iconic Font</h1>
            <p>The iconic font and CSS toolkit</p>
            <p>Material Design Iconic Font is a full suite of material design icons (created and maintained by <a href="https://github.com/google/material-design-icons" target="_blank">Google</a>) for easy scalable vector graphics on websites.</p>
        </div>
        <div class="col-md-8 col-sm-8 text-center">
            <div class="actions">
                <a class="btn btn-default btn-lg" href="#" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
                    <i class="fa fa-download fa-lg"></i>&nbsp;&nbsp;
                    Download v1.0.1 (ZIP)
                </a>
            </div>
            <div class="inflated-egos">
                Version 1.0.1
                &nbsp;&nbsp;
                <a href="https://github.com/zavoloklom/material-design-iconic-font" target="_blank">GitHub Project</a>
                &nbsp;&nbsp;
                Created by <a href="http://twitter.com/zavoloklom">Sergey Kupletsky</a>
            </div>
        </div>
    </div>
</div>

<div id="social-buttons" class="hidden-xs">
    <div class="container">
        <ul class="list-inline">
            <li class="git-tip">
                <a href="https://gratipay.com/zavoloklom/" target="_blank">
                    <img src="//img.shields.io/gratipay/zavoloklom.svg">
                </a>
            </li>
            <li>
                <iframe src="http://ghbtns.com/github-btn.html?user=zavoloklom&repo=material-design-iconic-font&type=watch&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
            </li>
            <li>
                <a class="twitter-share-button" href="https://twitter.com/share">
                    Tweet
                </a>
            </li>
            <li>
                <div class="g-plus" data-action="share" data-annotation="bubble"></div>
            </li>
        </ul>
    </div>
</div>

<div class="container">

    <section>
        <h1 class="page-header">Getting Started</h1>
    </section>

    <section id="default-css">
        <h2 class="page-header">BASIC: Default CSS</h2>
        <p>Use this method to get the default Material Design Iconic Font CSS.</p>
        <ol>
            <li>Download latest version of Material Design Iconic Font from this site or GitHub.</li>
            <li>Unpack the entire <code>material-design-iconic-font</code> archive into your project.</li>
            <li>
                In the <code>&lt;head&gt;</code> of your html, reference the location to your material-design-iconic-font.min.css.
                <div class="highlight"><pre><code class="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"path/to/material-design-iconic-font/css/material-design-iconic-font.min.css"</span><span class="nt">&gt;</span>
                </code></pre></div>
            </li>
            <li>Check out the <a href="examples.html">examples</a> to start using Material Design Iconic Font!</li>
        </ol>
    </section>

    <section id="custom-less">
        <h2 class="page-header">PRO: Custom LESS</h2>
        <p>Use this method to customize Material Design Iconic Font using LESS.</p>
        <ol>
            <li>Download source code of Material Design Iconic Font from GitHub.</li>
            <li>Copy the <code>less/</code> and <code>fonts/</code> directories into your project in <code>material-design-iconic-font</code> folder.</li>
            <li>
                Open your project's <code>path/to/material-design-iconic-font/less/variables.less</code> and edit the <code>@md-font-path</code>
                variable to point to your font directory.
                <div class="highlight">
                    <pre><code class="scss"><span class="k">@md-font-path</span><span class="nd">:</span>   <span class="s2">"../font"</span><span class="o">;</span></code></pre>
                </div>
                <p class="alert alert-success"><i class="fa fa-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
            </li>
            <li>Re-compile your LESS.</li>
            <li>Check out the <a href="examples.html">examples</a> to start using Material Design Iconic Font!</li>
        </ol>
    </section>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src='https://apis.google.com/js/platform.js'></script>
<script>
    window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
</script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-56068812-1', 'auto');
    ga('send', 'pageview');

</script>
</body>
</html>